<template>
  <el-container class="layout-container-demo" style="height: 95%;">
    <el-aside width="200px" class="hidden-sm-and-down">
      <el-scrollbar>
        <el-menu :router="true" :unique-opened="true">
          <el-sub-menu index="3">
            <template #title>
              <el-icon><setting /></el-icon>书籍
            </template>
            <el-menu-item-group>
              <el-menu-item index="/tag">书籍分类</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/books">书籍列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/addBooks">书籍录入</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/all">借阅记录</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
        <el-menu :router="true"  :unique-opened="true">
          <el-sub-menu index="3">
            <template #title>
              <el-icon><setting /></el-icon>我的
            </template>
            <el-menu-item-group>
              <el-menu-item index="/borrow">借阅</el-menu-item>
            </el-menu-item-group>
             <el-menu-item-group>
              <el-menu-item index="/my">还书</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div class="toolbar hidden-sm-and-down">
            <el-image
              style="width: 40px;height: 40px;borderRadius: 50%;marginRight: 5px;"
              :src="url"
              :initial-index="4"
              fit="fill"
            />
          <el-dropdown >
            <el-icon style="margin-right: 8px; margin-top: 1px"
              ><setting
            /></el-icon>
            <template #dropdown>
                <el-dropdown-item @click="userEdit">退出登陆</el-dropdown-item>
            </template>
          </el-dropdown>
        </div>
        <div class="drop hidden-sm-and-up">
        <el-dropdown  size="large" @command="handleCommand">
            <el-button type="primary">
              <el-icon><setting /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="书籍分类/tag">书籍分类</el-dropdown-item>
                <el-dropdown-item command="书籍列表/books">书籍列表</el-dropdown-item>
                <el-dropdown-item command="书籍录入/addBooks">书籍录入</el-dropdown-item>
                <el-dropdown-item command="借阅记录/all">借阅记录</el-dropdown-item>
                <el-dropdown-item command="我的借阅/borrow">我的借阅</el-dropdown-item>
                <el-dropdown-item command="我的还书/my">我的还书</el-dropdown-item>
                <el-dropdown-item command="edit">退出登陆</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <div class="title">
            {{title}}
          </div>
        </div>

      </el-header>
      <el-main>
        <el-scrollbar style="marginTop: 10px;marginLetf: 10px;marginRight: 10px;">
          <router-view></router-view>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>
<script lang="ts" setup>
import { ref , watchEffect } from 'vue'
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
import router from '../../router/index';


const title = ref<string>('书籍分类');




const url =
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'


const userEdit = () => {
  window.localStorage.removeItem('userInfo')
  window.localStorage.removeItem('token')
  router.push('/User')
}

const handleCommand = (command: any) => {
  if (command === 'edit') {
    return userEdit()
  }
  const data = command.split('/')
  router.push(data[1])
  title.value = data[0]
}

</script>
<style lang="scss" scoped>
@import './Home.scss'
</style>